<template>
  <div>
    <el-button type="warning" size="small" @click="dialogVisible=true">附件选择</el-button>
    <el-dialog
      v-if="dialogVisible"
      title="附件库选择"
      :visible.sync="dialogVisible"
      width="75%"
      :before-close="handleClose">
      <el-container>
        <el-header>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="图片" name="picture" v-if="this.params.fileType=='picture'"></el-tab-pane>
            <el-tab-pane label="视频" name="video" v-if="this.params.fileType=='video'"></el-tab-pane>
          </el-tabs>
        </el-header>
        <el-container>
          <el-aside width="200px">
            <div :class="['c-menu',channelName==''?'c-current':'']" @click="getALLChannelId()">
          <span>
            <i class="el-icon-folder"></i>
             全部
          </span>
            </div>
            <div v-for="item in channelList" :class="['c-menu',item.channelId==params.channelId?'c-current':'']"
                 @click="getChannelId(item)">
          <span>
            <i class="el-icon-folder"></i>
             {{ item.channelName }}
          </span>
            </div>
          </el-aside>
          <el-main>
            <div class="cms-list-header c-clearfix">
              <div class="c-fl pt5">
                <span>{{channelName==""?"全部":channelName}}</span>
              </div>
              <div class="content-flex-right c-fr">
                <cms-input label="附件名称" v-model="params.fileRemark"></cms-input>
                <el-button @click="goQuery()">查询</el-button>
              </div>
            </div>
            <div class="c-img-list c-clearfix">
              <div v-for="(item,index) in tableData" :class="['c-fl', 'c-img-item', item.checked?'c-checked':'']">
                <div class="c-border" @mouseenter="show(index)" @mouseleave="hide()">
                  <!--图片-->
                  <div v-if="item.fileType=='picture'" @click="goPreviewImg(item)">
                    <img :src="item.filePath" :alt="item.fileRemark" :title="item.fileRemark" style="cursor: pointer;" @error="defImg()" />
                  </div>
                  <!--OSS视频-->
                  <div v-else-if="item.fileType=='video' && item.uploadWay==1" :title="item.fileRemark">
                    <video :src="item.filePath" controls="controls" :autoplay="false" height="134px"
                           width="134px"></video>
                  </div>
                  <!--点播视频-->
                  <div v-else-if="item.fileType=='video' && item.uploadWay==2" :title="item.fileRemark"
                       @click="goPreview(item.videoId)">
                    <img src="../../../static/images/add-video.png" height="134" width="134" style="cursor: pointer;"
                         title="点击预览"/>
                  </div>
                  <div v-if="bianji&&index==current" class="copy"
                       @click="goCopy(item)" title="点击复制地址"><i
                    class="copy-icon"></i></div>
                </div>
                <div class="c-fl c-choose">
                  <el-checkbox v-model="item.checked" @change="attachmentCheck(index)"></el-checkbox>
                </div>
                <span class="ellipsis">{{item.fileRemark}}</span>
              </div>
            </div>
            <div class="cms-list-footer">
              <div class="cms-left">
              </div>
              <cms-pagination :total="total" :limit="params.pageSize" @change="getPages"></cms-pagination>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    props: {
      field: {
        type: String,
        default: '',
      },
      attachmentFileType: {
        type: String,
        default: '',
      },
      channelId: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        params: {
          channelId: '',
          fileType: 'picture',
          fileName: '',
          pageNo: 1,
          pageSize: 20
        },
        channelList: [],
        dialogVisible: false,
        isShowVideo: false,
        activeName: 'first',
        channelName: '全部',
        bianji: false,
        tableData: [],
        defaultImg:'../../../../static/images/default.png',  // 图片加载默认图
      };
    },
    methods: {
      handleClose() {
        this.dialogVisible = false;
      },
      handleClick(tab, event) {
        //console.log(tab.name);
        if (tab.name == 'picture') {
          this.params.fileType = 'picture';
        }
        if (tab.name == 'video') {
          this.params.fileType = 'video';
        }
        this.channelName = ""
        this.params.channelId = "";
        this.params.fileRemark = "";
        this.getTableData(this.$api.attachmentPageList, this.params);
      },
      getChannelList() {
        axios.post(this.$api.getOneLevelChannelList, {}).then(res => {
          if (res.code == '200') {
            this.channelList = res.body;
            if (this.channelList.length > 0) {
              let channelId = this.channelId;
              let items = this.channelList.filter((item) => {
                return channelId == item.channelId;
              });
              if (items.length > 0) {
                this.channelName = items[0].channelName
              }
            }
          }
        })
      },
      getPlayAuthInfo(videoId) {
        let url = this.$api.getPlayAuthInfo;
        axios.post(url, {videoId: videoId}).then(res => {
          console.log(res)
          if (res.code == "200") {
            let playAuth = res.body.playAuth;
            if (this.$myUtils.isNull(playAuth)) {
              this.errorMessage("预览失败,获取鉴权信息失败");
            } else {
              this.playAuth = playAuth;
              this.isShowVideo = true;
            }
          }
        });
      },
      goPreview(videoId) {
        if (this.$myUtils.isNull(videoId)) {
          this.errorMessage("预览失败缺少videoId");
        } else {
          this.videoId = videoId;
          this.getPlayAuthInfo(videoId);
        }
      },
      goSelect(attachment, field) {
        console.log(attachment)
        let result = {'field': field, 'fieldVal': attachment.filePath}
        this.$emit("getAttachmentVal", result);
        this.dialogVisible = false
      },
      attachmentCheck: function (index) {
        for (let i in this.tableData) {
          let newAttachment = this.tableData[i];
          if (index != i) {
            console.log(newAttachment)
            newAttachment.checked = false
          }
        }
        let attachment = this.tableData[index];
        if (attachment.checked) {
          this.goSelect(this.tableData[index], this.field)
        }
      },
      getALLChannelId() {
        // 全部
        this.channelName = ""
        this.params.channelId = "";
        this.getTableData(this.$api.attachmentPageList, this.params);
      },
      getChannelId(channel) {
        // 选择频道
        this.channelName = channel.channelName
        this.params.channelId = channel.channelId;
        this.getTableData(this.$api.attachmentPageList, this.params);
      },
      show(index) {
        this.bianji = true;
        this.current = index;
      },
      hide() {
        this.bianji = false;
        this.current = null;
      },
      initCheckData(checked) {
        for (let i in this.tableData) {
          let attachment = this.tableData[i];
          attachment.checked = checked;
        }
      },
      getTableData(listUrl, params) {//获取表格数据
        this.loading = true;
        this.$http.post(listUrl, params).then(res => {
          console.log(res)
          this.loading = false;
          if (res.code == '200') {
            if (res.totalCount != undefined) {
              this.total = res.totalCount;
            }
            let tableData = res.body;
            for (let i in tableData) {
              let attachment = tableData[i];
              attachment.checked = false;
            }
            this.tableData = tableData;
          } else {
            this.tableData = [];
          }
        }).catch(error => {
          this.loading = false;
        });
      },
      getPages(pageNo, pageSize) {
        //获取翻页数据
        this.params.pageNo = pageNo;
        this.params.pageSize = pageSize;
        this.getTableData(this.$api.attachmentPageList, this.params);
      },
      goQuery() {
        this.params.pageNo = 1;
        this.getTableData(this.$api.attachmentPageList, this.params);
      },
      defImg(){
        // 图片加载不出来显示默认图
        let img = event.srcElement;
        img.src = this.defaultImg;
        img.onerror = null; //防止闪图
      },
      goCopy(attachment) {
        console.log(attachment); //每一行的数据
        let filePath = attachment.filePath;
        let oInput = document.createElement('input');
        oInput.value = filePath; //赋值
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'oInput';
        oInput.style.display = 'none';
        this.successMessage('复制成功');
      }
    },
    mounted() {
      console.log("附件组件获取的频道Id" + this.channelId)
      let fileType = this.attachmentFileType;
      if (fileType == 'ossVideo') {
        this.params.fileType = 'video';
        this.params.uploadWay = 1;
      }
      if (fileType == 'demandVideo') {
        this.params.fileType = 'video';
        this.params.uploadWay = 2;
      }
      this.getChannelList();
      this.params.channelId = this.channelId;
      this.getTableData(this.$api.attachmentPageList, this.params) //请求列表
    }
  };
</script>

<style scoped>
  .cms-list-header span {
    text-transform: lowercase;
  }

  .el-table__row .cell .icon-wenjianjiabiheicon,
  .el-table__row .cell .icon-file {
    color: #ffc822;
  }

  .upload-demo {
    margin-left: 6px
  }

  .icon-wenjianjiabiheicon,
  .icon-shijian,
  .icon-file {
    font-size: 20px;
    position: relative;
    top: 3px;
  }

  .icon-unie62e {
    color: #00aeff;
  }

  .uploadDiv,
  .uploading {
    display: inline-block;
  }

  .el-container {
    padding: 10px 20px 0 20px;
  }

  .el-aside {
    background: #f5f5f5;
    padding: 10px;
    min-height: 100vh;
  }

  .c-menu {
    width: 100%;
    height: 30px;
    margin-bottom: 10px;
    padding: 0 15px;
    cursor: pointer;
    line-height: 30px;
  }

  .c-menu span {
    color: #444;
  }

  .c-menu .el-icon-folder {
    font-size: 18px;
    color: #EEA12E;
    margin-right: 5px;
  }

  .c-clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
  }

  .c-clearfix {
    zoom: 1;
  }

  .pt5 {
    padding-top: 5px;
  }

  .c-fl {
    float: left;
  }

  .c-fr {
    float: right;
  }

  .cms-list-header {
    padding: 0 0 15px 0;
    border-bottom: 1px solid #e7ecf3;
  }

  .el-button--default {
    background: #EEA12E;
    color: #fff;
    border-color: #EEA12E;
  }

  .el-button.is-circle {
    border: none;
    background: none;
    padding: 0;
    min-width: 20px;
    color: #F56C6C;
    font-size: 20px;
    vertical-align: middle;
    margin-left: 20px;
  }

  .c-img-list {
    padding-top: 15px;
  }

  .c-img-item {
    width: 135px;
    margin: 0px 15px 15px 0px;
  }

  .c-border {
    width: 135px;
    height: 135px;
    display: block;
    border: 1px solid #eee;
    position: relative;
  }

  .c-img-item img {
    width: 134px;
    height: 134px;
    border: none;
    object-fit: contain;
  }

  .ellipsis {
    display: -webkit-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .c-img-item span {
    line-height: 30px;
    font-size: 14px;
    padding-left: 5px;
  }

  .el-main {
    padding-top: 0;
  }

  .el-header {
    height: 50px !important;
  }

  .c-current {
    background: #fff;
  }

  .bianji {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);
  }

  .bianji-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 5px;
    background: url("/static/images/bianji.png") no-repeat;
    background-size: 14px;
    cursor: pointer;
  }

  .c-checked .c-border {
    box-shadow: 0px 0px 5px 2px rgba(226, 75, 1, 0.5);
  }
  .copy {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);
  }

  .copy-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 5px;
    background: url("/static/images/copy.png") no-repeat;
    background-size: 14px;
    cursor: pointer;
  }
</style>
